Vue.component('sidebar-nav', {
    props: {
        currentPage: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            currentUser: null,
            isAdmin: false
        }
    },
    created() {
        const userStr = localStorage.getItem(API_CONFIG.USER_KEY);
        if (userStr) {
            this.currentUser = JSON.parse(userStr);
            this.isAdmin = this.currentUser.role === 'admin';
        }
    },
    template: `
        <nav class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
            <div class="position-sticky pt-3">
                <div class="text-center mb-4">
                    <h5>旅行社管理系统</h5>
                    <small class="text-muted">{{ currentUser.username }}</small>
                </div>
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link" :class="{ active: currentPage === 'dashboard' }" href="dashboard.html">
                            <i class="bi bi-house-door"></i>
                            仪表盘
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" :class="{ active: currentPage === 'customers' }" href="customers.html">
                            <i class="bi bi-people"></i>
                            客户管理
                        </a>
                    </li>
                    <li class="nav-item" v-if="isAdmin">
                        <a class="nav-link" :class="{ active: currentPage === 'workarea' }" href="workarea.html">
                            <i class="bi bi-building"></i>
                            工作区管理
                        </a>
                    </li>
                    <li class="nav-item" v-if="isAdmin">
                        <a class="nav-link" :class="{ active: currentPage === 'users' }" href="users.html">
                            <i class="bi bi-person"></i>
                            用户管理
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" @click.prevent="$emit('logout')">
                            <i class="bi bi-box-arrow-right"></i>
                            退出登录
                        </a>
                    </li>
                </ul>
            </div>
        </nav>
    `
}); 